import { Tooltip } from "antd";
import { memo, DragEvent } from "react";

interface RagNodeProps {
  imgUrl?: string;
  illustrate?: string;
  text: string | JSX.Element;
  onDragStart?: (e: DragEvent<HTMLDivElement>) => void;
  onClick?: () => void;
  style?: React.CSSProperties;
}

const RagNode = (props: RagNodeProps) => {
  const { imgUrl, text, onDragStart, style, onClick, illustrate } = props;

  return (
    <Tooltip placement="right" title={
      <div className="w-[300px] text-[#667085] p-2 pointer-events-none">
        <div className="flex">
          <img
            src={imgUrl}
            className="w-[30px] h-[30px] flex-shrink-0"
          />
          <span className="text-black mt-1 ml-3">{text}</span>
        </div>
        <div className="w-[220px] mt-2">
          <p>{illustrate}</p>
        </div>
      </div>
    } color="white">
      <div
        onDragStart={(e) => onDragStart && onDragStart(e)}
        className="dndnode output"
        draggable
        onClick={onClick}
        style={{ ...style, borderRadius: 10, cursor: "pointer" }}
      >
        <div className="flex justify-start p-3 rounded-lg hover:bg-gray-100 transition-colors duration-200">
          <img src={imgUrl} style={{ height: 30 }} draggable={false} />
          <span className="ml-2 mt-[6px]">{text}</span>
        </div>
      </div>
    </Tooltip>
  );
};

export default memo(RagNode);
